<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！ &copy;瑞金佬的前端路</title>
<link rel="stylesheet" href="demo/css/style.css" type="text/css" media="all" />
<link href="demo/css/demo.css" type="text/css" rel="stylesheet" />
</head>

<body>  
<div class="header">
    <div class="wraper">
    	<h1><a href="http://validform.rjboy.cn">Validform</a></h1>
        <ul class="nav">
            <li><a href="http://validform.rjboy.cn/">关于Validform</a></li>
            <li><a href="demo.html" class="current">Demo</a></li>
            <li><a href="document.html">文档</a></li>
            <li><a href="help.html">帮助</a></li>
            <li><a href="http://validform.rjboy.cn/?p=1">网友讨论</a></li>
        </ul>
    </div>
</div>
<div class="main">
    <div class="wraper">
        <p class="tr"><a href="demo.html" class="blue ml10 fz12">返回示例首页&raquo;</a></p>
        
    	<h2 class="green">使用Validform对象</h2>
        <form class="registerform" action="ajax_post.php">
            <table width="100%" style="table-layout:fixed;">
                <tr>
                    <td class="need" style="width:10px;">*</td>
                    <td style="width:70px;">昵称：</td>
                    <td style="width:205px;"><input type="text" value="" maxlength="2" name="name" class="inputxt" datatype="s6-18" ajaxurl="valid.php" nullmsg="请输入昵称！" errormsg="昵称至少6个字符,最多18个字符！" /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>密码：</td>
                    <td><input type="password" value="" name="userpassword" class="inputxt" datatype="*6-16" nullmsg="请设置密码！" errormsg="密码范围在6~16位之间！" /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td style="width:205px;">确认密码：</td>
                    <td><input type="password" value="" name="userpassword2" class="inputxt" datatype="*" recheck="userpassword" nullmsg="请再输入一次密码！" errormsg="您两次输入的账号密码不一致！" /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need"></td>
                    <td></td>
                    <td colspan="2" style="padding:10px 0 18px 0;">
                        <input type="submit" value="提 交" /> <a href="###" class="reset ml10">重置表单</a> <a href="###" class="resetstatus ml10">点这执行resetStatus()</a>
                    </td>
                </tr>
            </table>
        </form>
        
        <form class="registerform" action="ajax_post.php">
            <table width="100%" style="table-layout:fixed;">
                <tr>
                    <td class="need" style="width:10px;">*</td>
                    <td style="width:70px;">昵称：</td>
                    <td style="width:205px;"><input type="text" value="" name="name" class="inputxt" datatype="s6-18" ajaxurl="valid.php" nullmsg="请输入昵称！" errormsg="昵称至少6个字符,最多18个字符！" /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>密码：</td>
                    <td><input type="password" value="" name="userpassword" class="inputxt" datatype="*6-16" nullmsg="请设置密码！" errormsg="密码范围在6~16位之间！" /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td style="width:205px;">确认密码：</td>
                    <td><input type="password" value="" name="userpassword2" class="inputxt" datatype="*" recheck="userpassword" nullmsg="请再输入一次密码！" errormsg="您两次输入的账号密码不一致！" /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need"></td>
                    <td></td>
                    <td colspan="2" style="padding:10px 0 18px 0;">
                        <input type="submit" value="提 交" /> <input type="button" class="save" value="保 存" /> <a href="###" class="abort ml10">取消提交</a>
                    </td>
                </tr>
            </table>
        </form>
        
        <h2>说明：</h2>
        <div class="tipmsg">
        	<p>具体说明请参考文档里Validform对象的介绍。</p>
        </div>
        
    </div>
</div>

<div class="footer">
    <div class="wraper">
        <p class="fl">Copyright &copy; <a href="http://www.eloocor.com" target="_blank">易罗客</a></p>
        <p class="fr"><a href="http://www.rjboy.cn" target="_blank">瑞金佬的前端路</a><b> | </b><a href="http://validform.rjboy.cn">Validform</a><b> | </b><a href="http://www.rjboy.cn/?p=789" target="_blank">hScrollpane</a><b> | </b><a href="http://www.rjboy.cn/?p=708" target="_blank">Xslider</a></p>
    </div>
</div>

<script type="text/javascript" src="demo/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="demo/js/Validform_v5.3.2_min.js"></script>

<script type="text/javascript">
$(function(){
	//$(".registerform").Validform();  //就这一行代码！;
	
	var demo=$(".registerform").Validform({
		tiptype:2,
		postonce:true,
		showAllError:true,
		ajaxPost:true
	});
	
	//通过Validform对象的tipmsg属性修改除tit外的提示文字;
	demo.tipmsg.r=" ";
	
	//通过Validform对象的dataType属性可以获取到内置的正则;
	
	//点击保存按钮，不验证直接提交表单;
	$(".save").click(function(){
		//submitForm()方法中，如果传入true，表单会不做验证直接提交;
		//ajaxPost()方法也是一样;
		demo.eq(1).submitForm(true);
		
		//如果这样写，只会让第一个表单提交;
		//demo.submitForm(true);
	});
	
	//点击重置表单链接，重置指定表单对象;
	$(".reset").click(function(){
		demo.eq(0).resetForm();
		
		//如果这样写，两个表单都会被重置;
		//demo.resetForm();
		
		return false;
	});
	
	//因为传入了postonce:true，表单提交成功过一次后就不能再提交了;
	//这时可以通过调用resetStatus()方法来重置表单提交状态，让表单继续可以提交;
	$(".resetstatus").click(function(){
		demo.eq(0).resetStatus();
		
		//如果这样写，两个表单的提交状态都会被重置;
		//demo.resetStatus();
		
		return false;
	});
	
	//使用abort方法终止正在进行的ajax提交表单操作;
	$(".abort").click(function(){
		demo.abort();
		
		//这样写的话只会终止第二个表单的ajax提交;
		//demo.eq(1).abort();
		
		return false;	
	});
})
</script>
</body>
</html>